<template>
	<view class="container">
		
		<view class="content1">
			<view class="icon1">
				<u-icon class="icon" name="checkmark-circle" color="#fff" size="38"></u-icon>

			</view>
			<view class="status">
				已下单
			</view>
			<view class="text1">
				下单已完成，感谢您的使用
			</view>
		</view>
		<view class="content2">
			<view class="number">
				订单号：{{this.orderId }}
			</view>
			<view class="time">
				下单时间
			</view>
			<view class="times">
				{{ this.createTime }}
			</view>
			<view class="member">
				<view class="avatar">
					<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width='40' height='40'></u--image>

				</view>
				<view class="member-name">
					派送员：郑师傅
				</view>
				<view class="member-phone">
					13304945789
				</view>
			</view>

		</view>
		<view class="content3">
			<view class="points">
				共收益积分
				<text>+10积分</text>
			</view>

		</view>
		<view class="content4">
			<view class="message">
				<text class="left">
					地址
				</text>
				<text class="right">
					{{this.addressId}}
				</text>
			</view>
			<view class="message">
				<text class="left">
					联系人
				</text>
				<text class="right">
					{{user.name}}
				</text>
			</view>
			<view class="message">
				<text class="left">
					联系电话
				</text>
				<text class="right">
					{{this.user.phone}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zt: '',
				user:{},
				userId:'',
				id:'',
				array:[],
				order:[],
				orderId:'',
				createTime:'',
				addressId:'',
			};
		},
	
		mounted(){
			this.userId = uni.getStorageSync('userId');
			this.user = uni.getStorageSync('user');
			
			
		},
		onLoad(options) {
			this.orderId = options.id; // 获取跳转页面时传递的订单ID
			this.createTime=options.createTime
			console.log('00',this.createTime)
			this.addressId=options.addressId
			console.log('11',this.addressId)
		
		},
		methods:{
			//返回
			goToBack() {
				uni.navigateTo({	
					
					url: '/pages/orderform/orderform',
						
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.container {
		background-color: #F8F8F8;
		position: relative;
		
		//顶部标题
		.content-title {
			background-color: #fff;
			color: #000;
			font-weight: bold;
			height: 100rpx;
			position: relative;
			font-size: 16px;
		
			.title-left {
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		
			.title-right {
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
	.content1 {
		background-color: #4DC88F;
		width: 100%;
		height: 300rpx;
		color: #fff;
		padding-top: 70rpx;

		.icon1 {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-bottom: 20rpx;
		}

		.status {
			width: 100%;
			text-align: center;
			font-size: 18px;
			padding-bottom: 10rpx;
		}

		.text1 {
			width: 100%;
			text-align: center;
			font-size: 12px;
		}
	}

	.content2 {
		background-color: #fff;
		width: 94%;
		position: absolute;
		top: 270rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #BFBFBF;
		padding: 0 30rpx;
		padding-bottom: 50rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;
		.number {
			margin-top: 50rpx;
			margin-bottom: 30rpx;

		}

		.time {
			font-size: 18px;
			margin-bottom: 30rpx;
		}

		.times {
			font-size: 18px;
			color:#BFBFBF;
			border-bottom: 1px solid #E7E7E7;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
		}

		.member {
			display: flex;
			align-items: center;

			.member-name {
				margin: 0 20rpx;
			}

			.member-phone {
				margin-left: 20rpx;
				color: #4DC88F;
			}
		}

	}

	.content3 {
		margin: 0 auto;
		margin-top: 400rpx;
		width: 94%;
		background-color: #fff;
		padding: 30rpx 0;
		text-align: end;
		color: #BFBFBF;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;

		.points {
			text {
				margin: 0 20rpx;
				color: #4DC88F;
			}
		}
	}

	.content4 {
		width: 94%;
		background-color: #fff;
		padding: 0 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;

		.message {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid #E7E7E7;
		}
	}

	.content5 {
		width: 94%;
		height: 200rpx;
		background-color: #fff;
		padding: 0 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		align-items: center;
		margin-bottom: 300rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;
		.store-right{
			width: 300rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			.store-icon{
				margin-right: 20rpx;
			}
		}



	}
</style>